<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex:1,flex:auto,flex:none,flex:0</title>
    <style>
      .flex1 {
        border: 1px solid #888;
        flex: 1;
      }
      .flexauto {
        border: 1px solid #888;
        flex: auto;
      }
      .flexnone {
        border: 1px solid #888;
        flex: none;
      }
      .flex0 {
        border: 1px solid #888;
        flex: 0;
      }
    </style>
  </head>
  <body>
    <hr />
    <div style="display: flex">
      <div class="flex1">风萧萧易水寒</div>
      <div class="flex1">
        风萧萧易水寒风萧萧易水寒风萧萧易水寒风萧萧易水寒风萧萧易水寒风萧萧易水寒风萧萧易水寒
      </div>
    </div>
    <h2>
      <p>flex:1 用于分配容器剩余宽度</p>
      <p>flex:1 会优先牺牲较大的元素宽度</p>
      <p>flex:1 使用与让每个元素平分宽度</p>
    </h2>
    <hr />
    <div style="display: flex">
      <div class="flexauto">风萧萧易水寒</div>
      <div class="flexauto">
        风萧萧易水寒1风萧萧易水寒1风萧萧易水寒1风萧萧易水寒1风萧萧易水寒1风萧萧易水寒1
      </div>
    </div>
    <h2>
      <p>flex:auto 也是用于分配容器剩余宽度</p>
      <p>flex:auto 会优先扩张较大的元素的宽度</p>
      <p>flex:auto 通常是越大的元素越大,不会达到平分宽度的效果的</p>
    </h2>
    <hr />
    <div style="display: flex">
      <div class="flexnone">风萧萧易水寒</div>
      <div class="flexnone">
        风萧萧易水寒2风萧萧易水寒2风萧萧易水寒2风萧萧易水寒2风萧萧易水寒2风萧萧易水寒2
      </div>
    </div>
    <h2>
      <p>flex:none 代表的是=> flex-grow:0; flex-shrink:0; flex-basic:auto;</p>
      <p>
        flex:none 不是分配容器的剩余宽度了,而是代表的是让其宽度变为随内容适应
      </p>
      <p>flex-grow:0 ==> 元素不会放大来填充容器剩余空间</p>
      <p>flex-shrink:0 ==> 元素不会缩小以适应容器的空间</p>
      <p>flex-basic:auto ==> 元素的初始大小是内容的大小</p>
    </h2>
    <hr />
    <div style="display: flex">
      <div class="flex0">风萧萧易水寒</div>
      <div class="flex0">
        风萧萧易水寒3风萧萧易水寒3风萧萧易水寒3风萧萧易水寒3
      </div>
    </div>
    <h2>
      <p>flex:0 代表的是=> flex-grow:0; flex-shrink:1; flex-basic:0%;</p>
      <p>flex:0 不会分配宽度,只会缩小来适应容器宽度</p>
      <p>flex-grow:0 ==> 不会放大</p>
      <p>flex-shrink:1 => 会缩小来适应容器</p>
      <p>flex-basic:0% => 初始大小是0</p>
    </h2>
  </body>
</html>
